The Mobile Mouse I

In this recipe we suggest a way to liven your web pages.

Move the mouse cursor over the images!

Discussion

Using the onMouseOver() event, you can make things a happen on your web page whenever the user places the mouse cursor over an anchor or client-side image map. (In this example we're showing how to use it with anchors.) The syntax couldn't be simpler:

<A HREF="SOMEFILE.HTM" onMouseOver="JSFunc(arg)">Click here</A>

where JSFunc(arg) is some JavaScript function you'd like to execute as the result of the mouse cursor entering the region of the anchor. Alternatively, you can use

<MAP NAME="map1">
<AREA COORDS="0,0,54,18" onMouseOver="JSFunc(arg)" HREF="javascript:GoFunc(1)">
</MAP>

You can use this event to trigger graphics changes, play audio clips, or update text (like in this example). One common trick involves changing the browser window status text, but you can go a lot further than that! Your only limit is your imagination!

One thing lacking in this recipe is that when you leave one of the images, the text for that image remains--the form doesn't go blank. (Try moving over the alien head, then moving right.) You could put lots of empty images bordering the "visible" images, and have their text be empty, but that would lack a certain amount of elegance. If you've got Netscape 3.0 or greater, or Microsoft Internet Explorer 4.0 or greater, you can use another event to solve this problem.

Copyright ©1998 by Charles River Media, All Rights Reserved